<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>排行榜页面</title>
    <!-- <link rel="stylesheet" href="styles.css"> -->
    <link rel="stylesheet" href="./element/index.css">
    <style>
        @font-face {
            font-family: 'DingTalkJinBuTi';
            src: url('./fonts/DingTalk\ JinBuTi.ttf') format('truetype');
            font-weight: normal;
            font-style: normal;
        }

        body {
            font-family: 'DingTalkJinBuTi', sans-serif;
            margin: 0;
            padding: 0;
            background-color: #f4f4f9;
        }

        .container {
            margin: 0 auto;
            padding: 20px;
            background-color: #f8f2ee;
            border-radius: 10px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            position: relative;
        }

        .header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-bottom: 20px;
        }

        .header img {
            width: 100px;
            height: 50px;
            border-radius: 50%;
        }

        .header p {
            font-size: 51px;
            text-align: right;
            margin: 0;
        }

        .rank-list {
            display: flex;
            justify-content: space-around;
            list-style-type: none;
            padding: 0;
            margin: 0;
        }

        .rank-list p {
            font-size: 28px;
            z-index: 100;
            /* 确保排名徽章在图像之上 */
        }

        .rank-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            width: calc(33% - 20px);
            padding: 130px 0 70px 0;
            border-radius: 10px;
            position: relative;
        }

        .rank-item1 .name {
            margin: -58px 0 0 0;
        }

        .rank-item2 .name {
            margin: -5px 0 0 226px;
        }

        .rank-item3 .name {
            margin: 2px 240px 0 0;
        }

        .rank-item1 .score {
            margin: 35px 0 0 0;
            font-size: 36px;
        }

        .rank-item2 .score {
            margin: 35px 0 0 310px;
            font-size: 36px;
        }

        .rank-item3 .score {
            margin: 28px 315px 0 0;
            font-size: 36px;
        }

        .rank-item1 .department {
            margin: 10px 0 0 0;
            font-size: 36px;
        }

        .rank-item2 .department {
            margin: 3px 0 0 310px;
            font-size: 36px;
        }

        .rank-item3 .department {
            margin: 10px 315px 0 0;
            font-size: 36px;
        }

        .rank-item:nth-child(1) {
            top: 20px;
        }

        .rank-item:nth-child(2) {
            top: 40px;
        }

        .rank-item:nth-child(3) {
            top: 60px;
        }

        .image-container {
            border-radius: 50%;
            overflow: hidden;
        }

        .rank-item1 .image-container {
            width: 205px;
            height: 205px;
            transform: translate(5px, -36px);
        }

        .rank-item2 .image-container {
            width: 194px;
            height: 194px;
            transform: translate(111px, 19px);
        }

        .rank-item3 .image-container {
            width: 170px;
            height: 170px;
            transform: translate(-117px, 19px);
        }

        .image-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .info {
            text-align: center;
            margin-top: 20px;
        }

        .rank-badge {
            width: 300px;
            height: auto;
            position: absolute;
            top: -70px;
        }

        .rank-item1 .rank-badge {
            left: 50%;
            transform: translateX(-50%);
        }

        .rank-item2 .rank-badge {
            width: 620px;
            height: auto;
            left: 50%;
            transform: translateX(-55%);
            top: -15px;
        }

        .rank-item3 .rank-badge {
            width: 480px;
            height: auto;
            left: 40%;
            transform: translateX(-50%);
            top: 10px;
        }

        .table-container {
            width: 90%;
            background-color: #D1DBAC;
            border-radius: 20px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
            margin-top: -20px;
            margin-left: auto;
            /* 添加左侧自动外边距 */
            margin-right: auto;
            /* 添加右侧自动外边距 */
        }

        .el-table {
            border-radius: 20px;
        }

        .el-table th {
            background-color: #D1DBAC !important;
            font-weight: normal !important;
            font-size: 35px !important;
            text-align: center !important;
            color: #595656;
        }

        .el-table tr {
            color: #000000;
            background-color: #F0F4E2 !important;

        }

        .el-table__body {
            background-color: #D1DBAC;
            border-spacing: 0px 16px !important;
            padding: 0 20px;
            table-layout: auto;
        }

        .el-table .cell {
            text-align: center !important;
            line-height: 35px !important;
            font-size: 35px !important;
        }

        .el-table .el-table__cell {
            padding: 8px 0 !important;
            margin-top: 0px !important;
        }

        .el-table__row{
            width:90%
        }

        .footer {
            position: fixed;
            bottom: 0;
            left: 0;
            width: 100%;
            background-color: #333;
            color: #fff;
            text-align: center;
            padding: 10px 0;
        }

        .footer button {
            margin: 0 10px;
            padding: 10px 20px;
            background-color: #555;
            color: #fff;
            border: none;
            cursor: pointer;
        }

        .footer button:hover {
            background-color: #777;
        }

        .cell-start {
            border-top: 1px solid #ebeff0;
            border-bottom: 1px solid #ebeff0 !important;
            border-left: 1px solid #ebeff0;
            border-radius: 10px 0px 0px 10px;
        }

        .cell-end {
            border-top: 1px solid #ebeff0;
            border-bottom: 1px solid #ebeff0 !important;
            border-right: 1px solid #ebeff0;
            border-radius: 0px 10px 10px 0px;
        }

        .cell-middle {
            border-top: 1px solid #ebeff0;
            border-bottom: 1px solid #ebeff0 !important;
        }

        .el-table__body-wrapper {
            margin-top: -11px !important;
        }

    </style>
</head>

<body>
    <div class="container" id="app">
        <div class="header">
            <p v-if="two.plaName">第{{ two.ruaNumber }}期“我与软件有个约会”</p>
        </div>
        <!-- <img src="../PwYeMian/assets/images/叉.png" alt="返回" style=" width: 50px; height: auto; left: 1980px; top: 4px; position: absolute;" @click="goback()" /> -->
        <ul class="rank-list">
            <li class="rank-item rank-item2">
                <div class="image-container">
                    <img  :src="two.plaAvatar" alt="头像2" class="image-rank-head">
                </div>
                <p class="name">{{ two.plaName }}</p>
                <p class="score">{{ formatScore(two.avgScore) }}</p>
                <p class="department">{{ two.plaDepartment }}</p>
                <div class="info">
                    <img src="../PwYeMian/assets/images/第二名.png" alt="图片丢失" class="rank-badge">
                </div>
            </li>
            <li class="rank-item rank-item1">
                <div class="image-container">
                    <img :src="one.plaAvatar" alt="头像1" class="image-rank-head">
                </div>
                <p class="name">{{ one.plaName }}</p>
                <p class="score">{{ formatScore(one.avgScore) }}</p>
                <p class="department">{{ one.plaDepartment }}</p>
                <div class="info">
                    <img src="../PwYeMian/assets/images/第一名.png" alt="图片丢失" class="rank-badge">
                </div>
            </li>
            <li class="rank-item rank-item3">
                <div class="image-container">
                    <img :src="three.plaAvatar" alt="头像3" class="image-rank-head">
                </div>
                <p class="name">{{ three.plaName }}</p>
                <p class="score">{{ formatScore(three.avgScore) }}</p>
                <p class="department">{{ three.plaDepartment }}</p>
                <div class="info">
                    <img src="../PwYeMian/assets/images/第三名.png" alt="图片丢失" class="rank-badge">
                </div>
            </li>
        </ul>
        <div class="table-container">
            <el-table :data="otherPlayers" class="custom-table" :cell-class-name="tableCellClassName">
                <el-table-column prop="rank" label="排名"></el-table-column>
                <el-table-column label="头像">
                    <template slot-scope="scope">
                        <el-avatar size="number" :src="scope.row.plaAvatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column prop="plaName" label="姓名"></el-table-column>
                <el-table-column prop="plaDepartment" label="部门"></el-table-column>
                <el-table-column prop="avgScore" label="得分">
                    <template slot-scope="scope">
                        {{ formatScore(scope.row.avgScore) }}
                    </template>
                </el-table-column>
            </el-table>
        </div>
    </div>
    <script src="./vue/vue.js"></script>
    <script src="./vue/axios.min.js"></script>
    <script src="./element/index.js"></script>
    <script>
        if (typeof axios === 'undefined') {
            console.error("Axios is not loaded.");
        } else {
            const ajax = axios.create({
                baseURL: 'http://8.137.118.148:8083/',
                timeout: 10000
            });
            const userData = localStorage.getItem('user');
            const token = userData ? JSON.parse(userData).token : '';
            ajax.defaults.headers.common['Authorization'] = 'Bearer ' + token;

            var app = new Vue({
                el: '#app',
                data: {
                    list: [],
                    one: {},
                    two: {},
                    three: {},
                    otherPlayers: [
                        // { rank: 4, plaName: '张你三', plaDepartment: '软件开发', avgScore: 90.5 },
                        // { rank: 6, plaName: '王五', plaDepartment: '市场营销', avgScore: 78.9 },    
                    ]
                },
                methods: {
                    getResult() {
                        ajax.get('/player/orderby')
                            .then(response => {
                                this.list = response.data.data;
                                [this.one, this.two, this.three] = this.list.slice(0, 3);
                                this.otherPlayers = this.list.slice(3);
                            })
                            .catch(error => console.error("Error fetching data:", error));
                    },
                    formatScore(score) {
                        return score !== undefined && score !== null ? score.toFixed(2) : '-';
                    },
                    tableCellClassName({ row, column, rowIndex, columnIndex }) {
                        if (columnIndex == 0) {
                            return 'cell-start'
                        } else if (columnIndex == 4) {
                            return 'cell-end'
                        } else {
                            return 'cell-middle'
                        }
                    },

                },
                created() {
                    this.getResult();
                }
            });
        }
    </script>
</body>

</html>